<template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar title="仿微信" :noreadnum="totalNoreadnum"></free-nav-bar>
		<!-- 置顶列表 -->
		<block v-for="(item, index) in list" :key="index">
			<free-media-list v-if="item.istop" :item="item" :index="index" @long="long"></free-media-list>
		</block>
		<!-- 非置顶列表 -->
		<block v-for="(item, index) in list" :key="index">
			<free-media-list v-if="!item.istop" :item="item" :index="index" @long="long"></free-media-list>
		</block>
		
		<!-- 弹出层 -->
		<free-popup ref="extend" :bodyW="240" :bodyH="getMenusHeight">
			<view class="flex flex-column" style="width: 240rpx;" :style="getMenusStyle">
				<view class="flex-1 flex align-center" 
				hover-class="bg-light"
				v-for="(item,index) in menus" :key="index"
				@click="clickEvet(item.event)">
					<text class="font-md pl-3">{{item.name}}</text>
				</view>
			</view>
		</free-popup>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar"
	import freeMediaList from "@/components/free-ui/free-media-list.vue"
	import freePopup from "@/components/free-ui/free-popup.vue"  //弹出层
	import auth from '@/common/mixin/auth.js'
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				// 当前长按的index
				propIndex: -1,
				menus:[
					{
						name: "设为置顶",
						event: "setTop"
					},
					{
						name: "删除该聊天",
						event: "delChat"
					}
				]
			}
		},
		mixins: [auth],
		// 下拉刷新
		onPullDownRefresh() {
			// 获取会话列表
			this.$store.dispatch('getChatList')
			// 获取好友申请列表
			this.$store.dispatch('getApply')
			// 获取离线信息
			// 初始化总未读数角标
			this.$store.dispatch('updateBadge')
			// 获取朋友圈动态通知
			this.$store.dispatch('getNotice')
			uni.stopPullDownRefresh()
		},
		methods:{
			// 长按的坐标
			long({x, y, index}){ // index：是长按的哪一个列表
				// 初始化索引
				this.propIndex = index
				// 拿到当前对象
				let item = this.list[this.propIndex]
				// 判断之前是否处于置顶状态
				this.menus[0].name = item.istop ? "取消置顶" : "设为置顶"
				this.$refs.extend.show(x, y, index)
			},
			// 分发菜单事件
			clickEvet(event){
				switch(event){
					case "setTop": //置顶或取消置顶
						this.setTop()
						break;
					case "delChat":  //删除当前聊天
						this.delChat()
						break;
				}
				this.$refs.extend.hide()
			},
			//删除当前聊天
			delChat(){
				// this.list.splice(this.propIndex,1)
				let item = this.list[this.propIndex]
				this.chat.removeChatItem(item.id, item.chat_type)
				
			},
			//置顶或取消置顶
			setTop(){
				let item = this.list[this.propIndex];
				item.istop = !item.istop
			} 
		},
		computed: {
			...mapState({
				list: state=>state.user.chatList,
				totalNoreadnum: state=>state.user.totalNoreadnum,
				chat:state=>state.user.chat
			}),
			// 动态获取菜单高度
			getMenusHeight() {
				let H = 100
				return this.menus.length * H
			},
			// 获取菜单样式
			getMenusStyle(){
				return `height:${this.getMenusHeight}rpx`
			},
		},
		components:{
			freeNavBar,
			freeMediaList,
			freePopup
			
		}
	}
</script>

<style>
	
</style>
